<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form>
    <span>省份：</span>
    <select>
      <option class="province"></option>
    </select>
    <span>城市：</span>
    <select>
      <option class="city"></option>
    </select>
    <span>地区：</span>
    <select>
      <option class="area"></option>
    </select>
  </form>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    async function getData() {
      try {
        const res = await axios({
          url: 'http://hmajax.itheima.net/api/province'
        })
        const pname = res.data.list[0]
        document.querySelector('.province').innerHTML = pname
        const res2 = await axios({
          url: 'http://hmajax.itheima.net/api/city',
        })
        const cname = res2.data.list[0]
        document.querySelector('.city').innerHTML = cname
        const res3 = await axios({
          url: 'http://hmajax.itheima.net/api/area',
        })
        const aname = res3.data.list[0]
        document.querySelector('.area').innerHTML = aname
      } catch (err) {
        console.dir(err)
      }
    }

    getData()
  </script>
</body>

</html>